<template>
  <view class="main">
    <view class="top">
      <search bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <u-icon slot="leftMain" name="arrow-left" color="white" size="28"></u-icon>
        </blockquote>
        <blockquote class="right" slot="rightMain">
          <u-icon size="36" @click="goSearch" color='white' name="search"></u-icon>
          <u-icon size="36" class="dw" color='white' name="share-square"></u-icon>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <text class="title">{{detailInfo.title}}</text>
      <view class="atop">
        <view class="left">
          <text>{{detailInfo.origin}}</text>
          <text>{{detailInfo.time}}</text>
        </view>
        <view @click="isgz=!isgz" :class="!isgz?'right':'rightg'">
          {{isgz==false?"关注":"已关注"}}
        </view>
      </view>
      <image :src="detailInfo.cover" mode=""></image>
      <view class="zw">
        {{detailInfo.contenthtml}}
      </view>
    </view>
  </view>

</template>

<script>
  import search from '@/component/search/search.vue'
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    data() {
      return {
        isgz: false
      };
    },
    components: {
      search
    },
    computed: {
      ...mapState("m_test", ["detailInfo"])
    },
    onReady() {},
    methods: {
      goBack() {
        this.$Router.back()
      },
      goSearch() {
        this.$Router.push('/subpkg/search/search')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    width: 100vw;
    height: auto;

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .right {
        display: flex;

        .dw {
          margin: 0 10rpx;
        }
      }
    }

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin-top: calc(var(--status-bar-height) + 100rpx);
      color: black;
      padding: 30rpx;
      box-sizing: border-box;
      font-size: 28rpx;

      .title {
        font-size: 34rpx;
        display: flex;
        font-weight: bold;
        letter-spacing: 4rpx;
        justify-content: center;
      }

      .atop {
        margin-top: 40rpx;
        width: calc(100vw - 60rpx);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          flex-direction: column;

          text:nth-child(1) {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            font-weight: bold;

            &::after {
              content: "原创";
              display: block;
              color: lightgray;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20rpx;
              margin-left: 20rpx;
              width: 54rpx;
              height: 24rpx;
              border-radius: 4rpx;
              padding: 4rpx;
              background-color: dimgray;
            }
          }
        }

        .right {
          width: 90rpx;
          height: 50rpx;
          background-color: red;
          display: flex;
          font-size: 26rpx;
          justify-content: center;
          align-items: center;
          color: white;
          border-radius: 6rpx;
          transition: all ease-in-out .3s;
        }

        .rightg {
          width: 90rpx;
          height: 50rpx;
          background-color: #c00003;
          display: flex;
          border-radius: 6rpx;
          font-size: 26rpx;
          justify-content: center;
          align-items: center;
          color: white;
          transition: all ease-in-out .3s;
        }
      }

      image {
        width: 100%;
        border-radius: 6rpx;
        margin: 40rpx 0;
      }

      .zw {
        text-indent: 2rem;
        font-size: 26rpx;
        letter-spacing: 4rpx;
      }
    }


  }
</style>
